/* eslint no-unused-expressions: 0 */
import React, { Component } from 'react';
import { Dialog, Input, Select, Grid, DatePicker, TimePicker, Radio, Upload } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
const moment = require('moment');
import DialogDecorator from './DialogDecorator';
import {Message} from "@alifd/next/lib/index";
import Cookies from 'universal-cookie';

const cookies = new Cookies();

const { Col, Row } = Grid;

class DutyShiftDialog extends Component {
  constructor(props) {
    super(props);

    let dialogConfig = this.props.dialogConfig;
    let value = props.value;
    // // DatePicker根据字符串显示会有UTC时差，因此要传moment对象，这是飞冰内部没有处理好，这里识别并改成moment对象
    Object.keys(value).map((key) => {
      dialogConfig.forEach((d) => {
        if(d.name === key && (d.type === 'DateAndTimePicker' || d.type === 'TimePicker')) {
          value[key] = moment(value[key]);
        }
      })
    });
    this.state = {
      visible: props.visible,
      value: value,
    };
  }

  onFormChange = (value) => {
    this.setState({
      value,
    });
  };

  onOkHandler = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log('errors', errors);
        return;
      }
      this.props.onOk && this.props.onOk(this.state.value);
    });
  };

  render() {
    return (
      <Dialog
        title={this.state.value.id ? "编辑数据" : '添加数据'}
        isFullScreen={true}
        shouldUpdatePosition={true}
        onClose={this.props.onClose}
        onCancel={this.props.onCancel}
        afterClose={this.props.afterClose}
        onOk={this.onOkHandler}
        visible={this.state.visible}
        style={{ width: 600, padding: '0 20px' }}
      >
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.onFormChange}
          ref="form"
        >
          <div>
            {
              this.props.dialogConfig.map((row, idx) => {
                switch (row.type) {
                  case 'DateAndTimePicker':
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            required
                            name={row.name}
                            message='必选'
                          >
                            <DatePicker style={{ width: '400px' }} showTime={ {format:'HH:mm'} } format='YYYY-MM-DD'/>
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    );
                  case 'TimePicker':
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            required
                            name={row.name}
                            message='必选'
                          >
                            <TimePicker style={{ width: '400px' }} />
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    );
                  case 'Select':
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            required
                            name={row.name}
                            message="必选"
                          >
                            <Select style={{ width: '300px' }} dataSource={row.dataSource} />
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    );
                  case 'TextArea':
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            required
                            name={row.name}
                            message="必填"
                          >
                            <Input.TextArea style={styles.formField} placeholder={row.placeholder || ''} />
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    );
                  case 'Radios' :
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            required
                            name={row.name}
                            message='必填'
                          >
                            <Radio.Group dataSource={row.dataSource} />
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    );
                  case 'Input':
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            required
                            name={row.name}
                            message='必填'
                          >
                            <Input
                              style={styles.formField}
                              placeholder={row.placeholder || ''}
                            />
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    );
                  case 'Upload':
                    return (
                      <Row style={styles.formItem} key={idx}>
                        <Col span={5}>
                          <span style={styles.label}>{row.label}</span>
                        </Col>
                        <Col span={19}>
                          <IceFormBinder
                            name={row.name}
                          >
                            <Upload.Dragger
                              beforeUpload={(file, options) => {
                                return {
                                  headers: {
                                    token: cookies.get('token')
                                  }
                                }
                              }}
                              accept={'image/*'}
                              withCredentials={true}
                              listType="card"
                              action="/api/file/upload"
                              onSuccess={() => {
                                Message.success('文件上传成功');
                              }}
                              onError={() => {
                                Message.error('文件上传失败');
                              }}
                              limit={1}
                              autoUpload={true}
                              formatter={(res, file) => {
                                let { code, msg } = res;
                                // self.setState({
                                //   realFileName: msg.filename,
                                // });
                                return {
                                  success: code === 0,
                                  url: `/files/${msg.filename}`,
                                }
                              }}
                            />
                          </IceFormBinder>
                          <IceFormError name={row.name} />
                        </Col>
                      </Row>
                    )
                }
              })
            }
          </div>
        </IceFormBinderWrapper>
      </Dialog>
    );
  }
}

const styles = {
  row: {
    marginTop: '10px',
  },
  label: {
    lineHeight: '30px',
    paddingRight: '5px',
  },
  formField: {
    width: '400px'
  },
  formItem: {
    margin: '10px 0',
  }
};

export default DialogDecorator(DutyShiftDialog);
